<template>
  <v-main v-if="loading">
    <v-app-bar
        flat
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="2" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="8" class="text-center text-truncate mt-3">
            正在加载...
          </v-col>
          <v-col cols="2" class="text-right pr-0">
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container>
      <v-row>
        <v-col cols="12">
          <v-skeleton-loader
              elevation="2"
              type="card-avatar, article, divider,article,actions"
          ></v-skeleton-loader>
        </v-col>
      </v-row>
    </v-container>
  </v-main>
  <v-main v-else class="full-height">
    <v-app-bar
        flat
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="2" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="8" class="text-center text-truncate mt-3">
            {{ form.title }}
          </v-col>
          <v-col cols="2" class="text-right pr-0">
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>

    <v-container>
      <!--       主图-->
      <v-row no-gutters>
        <v-col cols="5">
          <v-img v-if="form.pictures[0]" :src="baseUrl+imgPrefixUrl+form.pictures[0]"></v-img>
        </v-col>
        <v-col cols="7">
          <v-card elevation="0">
            <v-card-title class="pt-0">
              {{ form.title }}
            </v-card-title>
            <v-card-subtitle class="py-0">
              {{ form.brandName }}
            </v-card-subtitle>
            <v-card-subtitle class="py-0">
              <v-rating
                  readonly
                  background-color="yellow accent-4"
                  color="yellow accent-4"
                  dense
                  half-increments
                  hover
                  :value="form.avgScore"
                  size="18">

              </v-rating>
              <div class="text-caption">{{form.avgScore}}</div>
            </v-card-subtitle>
          </v-card>
        </v-col>
      </v-row>
      <!--      详细信息-->
      <v-row no-gutters>
        <v-col cols="12">
          <v-simple-table >
            <template v-slot:default>
              <thead>
              <tr>
                <th colspan="2" style="font-size: 1rem">详细信息</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td style="min-width: 100px">品牌</td>
                <td>{{ form.brand }} {{form.brandName}}</td>
              </tr>
              <tr>
                <td>品类</td>
                <td>{{ form.type }}</td>
              </tr>
              <tr>
                <td>规格</td>
                <td>{{ form.size }}</td>
              </tr>
              <tr>
                <td>参考价格</td>
                <td>￥{{ form.price }}</td>
              </tr>
              <tr>
                <td>主要功能</td>
                <td>{{ form.usage }}</td>
              </tr>
              <tr>
                <td>适合肤质</td>
                <td>{{ form.forSkin }}</td>
              </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-col>
        <v-col cols="4" class="pa-1" v-for="(name,i) in form.pictures" @click="showImage(name,false)" :key="i">
          <v-img v-if="name" :src="baseUrl+imgPrefixUrl+name"></v-img>
        </v-col>
      </v-row>

      <v-divider class="my-2" v-if="cps.length>0"></v-divider>
      <!--      完美搭配-->
      <v-row v-if="cps.length>0">
        <v-col cols="12" class="pb-0">
          <div class="text-subtitle-1">完美搭配<span class="text-caption ml-1 pb-1" style="color: #FCB8C0">最佳CP</span></div>
        </v-col>
        <v-col cols="12" class="pt-0" style="white-space: nowrap;overflow-x: auto;overflow-scrolling: touch">
          <v-card elevation="0" width="100px" style="background-color: rgba(238,238,238,0.71);"
                  class="pa-1 my-1 mr-2 d-inline-block" v-for="(item,i) in cps" :key="i" @click="$router.push('/production/'+item.pid)" >
            <v-img v-if="item.pictures[0]" :src="baseUrl+imgPrefixUrl+item.pictures[0]"></v-img>
            <v-card-subtitle class="pa-0 pt-1 text-center overflow-hidden" style="max-height: 2.6rem">
              {{item.title}} <br>
              {{item.brandName}}
            </v-card-subtitle>
          </v-card>
        </v-col>
      </v-row>
      <div id="comments"></div>
    </v-container>
    <!--    评论-->
    <comments
        :show-add-comment="showAddComment"
        v-show="showComments"
        @closeAddComment="showAddComment=false"
        :comment-type="'production'"
        :id="$route.params.pid"
        @toast="$emit('toast',$event)"
    ></comments>
<!--    收藏和添加评论按钮-->
    <v-bottom-navigation
        color="primary"
        fixed
    >
      <v-row no-gutters>
        <v-col cols="6" class="text-center">
          <v-row align="center" no-gutters class="full-height">
            <v-col cols="12" v-if="favourite" @click="cancelFavourite">
              <v-icon size="28" color="primary">mdi-star</v-icon>
              <span class="grey--text text-subtitle-1">已收藏 {{ myNumberFormat(this.favouriteCount) }}</span>
            </v-col>
            <v-col cols="12" v-else @click="doFavourite">
              <v-icon size="28">mdi-star-outline</v-icon>
              <span class="grey--text text-subtitle-1">点击收藏 {{ myNumberFormat(this.favouriteCount) }}</span>
            </v-col>
          </v-row>

        </v-col>
        <v-col cols="6" class="text-center bg-main-color">
          <v-row align="center" no-gutters class="full-height">
            <v-col cols="12" @click="addComment">
              <v-icon size="28" color="white">mdi-plus</v-icon>
              <span class="white--text text-subtitle-1">添加评论</span>
            </v-col>
          </v-row>

        </v-col>
      </v-row>
    </v-bottom-navigation>
<!--    展示大图-->
    <show-big-image :show="imgOverlay" @dismiss="imgOverlay=false" :src="imgSrc"></show-big-image>


  </v-main>
</template>

<script>
import MyImageUpload from "../components/MyImageUpload";
import LoadMore from "../components/LoadMore";
import ShowBigImage from "../components/ShowBigImage";
import Comments from "../components/Comments";
import {myNumberFormat, simpleCopy,printMsg} from "../util/util";
import {baseUrl, imgPrefixUrl} from "../myConfig";

export default {

  name: "Production",
  components:{MyImageUpload,LoadMore,ShowBigImage,Comments},
  data: () => ({
    baseUrl:baseUrl,
    imgPrefixUrl:imgPrefixUrl,
    like: true,
    subscribed: true,
    collected: false,
    model: 0,
    imgOverlay: false,
    imgSrc:'',
    newComment:false,
    loadingProductions:false,
    form: {
      pid:'',
      title: '',
      brand: '',
      brandName:'',
      type: '',
      size: '',
      price: '',
      usage: '',
      forSkin: [],
      pictures: [],
      avgScore:0
    },
    skinTypes:[],
    cps:[],
    searchSkinType:'',
    loading:true,

    showComments: true,
    showAddComment: false,

    favourite:false,
    favouriteCount:0,

  }),
  methods: {
    addComment(){
      this.showAddComment = true
      let add = document.getElementById("comments")
      add.scrollIntoView()
    },
    myNumberFormat,
    toUserInfo(uid){
      this.$router.push("/userInfo/"+uid)
    },
    showImage(src,raw=false){
      if (!raw){
        src = baseUrl+imgPrefixUrl+src;
      }
      this.imgSrc = src;
      this.imgOverlay=true;
    },
    getCPS(){
      let data = {fitSkins: this.searchSkinType}
      this.$http.post('production/listProduction', data).then(res => {
        this.cps = res.data.map(a=>{
          a.pictures = a.pictureList
          return a
        }).filter(a=>a.pid!==this.form.pid)
        printMsg(this.cps,this)
      }).catch(res => {
        this.$emit("toast",res.msg)
      })
    },
    getProductions() {
      let data = {
        pid:this.form.pid,
        currentUid:this.$store.state.uid
      }
      this.$http.post('production/listProduction', data).then(res => {
        res.data = res.data[0]
        if (res.data.pictures){
          res.data.pictures = res.data.pictureList
        }
        if (res.data.forSkin){
          res.data.forSkin = res.data.forSkin.split(",")
        }
        this.searchSkinType = res.data.forSkin
        printMsg(this.skinTypes.filter(a=>res.data.forSkin.indexOf(a.value)!==-1),this)
        res.data.forSkin = this.skinTypes.filter(a=>res.data.forSkin.indexOf(a.value)!==-1)
        res.data.forSkin = res.data.forSkin.map(a=>a.valueName).join(' ')
        printMsg(res.data.forSkin,this)
        simpleCopy(res.data,this.form)
        this.form.avgScore = parseFloat(res.data.avgScore)
        this.favourite = res.data.favourite
        this.favouriteCount = res.data.favouriteCount
        this.loading=false
        this.getCPS()
      }).catch(res => {
        this.$emit("toast",res.msg)
      })
    },
    getKeyValues(key, store) {
      let data = {
        key: key
      }
      this.$http.post('constant/listConstant', data).then(res => {
        this[store] = res.data[0].values
      }).catch(res => {
        this[store] = []
      })
    },
    doFavourite(){
      let data = {
        fromUid:this.$store.state.uid,
        toAid:this.form.pid,
        type:'production'
      }
      this.$http.post('favourite/doFavourite', data).then(res => {
        this.favourite = true
        this.favouriteCount+=1
        this.$emit('toast','收藏成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    cancelFavourite(){
      let data = {
        fromUid:this.$store.state.uid,
        toAid:this.form.pid,
        type:'production'
      }
      this.$http.post('favourite/cancelFavourite', data).then(res => {
        this.favourite = false
        this.favouriteCount-=1
        this.$emit('toast','取消收藏成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
  },
  beforeMount() {
    this.getKeyValues('skinType', 'skinTypes')
    this.form.pid = this.$route.params.pid
    this.getProductions()
  },
  //监控pid变化手动更新页面内容
  watch:{
    '$route':{
      handler(){
        this.form.pid = this.$route.params.pid
        this.loading=true
        this.getProductions()
      },
      deep:true
    }
  }
}
</script>

<style scoped>

</style>
